<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../lib/comboBox/css/style.css" type="text/css"/>
		<link rel="stylesheet" href="dialog/style.css" type="text/css"/>
		<style>
			.dialog_body{
				font-size:0;
				border:1px solid #ccc;
				padding:10px;
			}
			
			.left, .middle, .right{
				display:inline-block;
				font-size:14px;
				vertical-align:middle;
			}
			
			.left{
				width:210px;
			}
			
			.middle{
				width:65px;
				text-align:center;
			}
			
			.right{
				width:200px;
			}
			
			.left > div{
				padding:2px;
			}
			.role{
				margin:1px;
			}
			.role_name, .departments{
				display:inline-block;
			}
			
			.departments{
				width:150px;
				border:solid 1px #ccc;
				padding:2px;
			}
			.department{
				padding:2px;	
				display:inline-block;
				background:#A0C1FF;
			}
			.option{
				background:#9999FF;
				margin:2px;
				padding:2px;
				cursor:pointer;
			}
			.option.selected{
				background:#CCCC00;
			}
			.role.selected{
				background:#99CC66;
			}
			tr{
				cursor:pointer;
			}
		</style>
	</head>
	<body>
		<button id="show">授权</button>
		<div style="display:none;" class="dialog_body">
			<div class="left">
				<table border="1" cellspacing="0" cellpadding="2" bordercolor="#ccc" width="100%">
					<tr><th colspan="2">已授角色</th></tr>
					<tr>
						<th>角色</th>
						<th>部门</th>
					</tr>
					<tr class="role">
						<td>角色1</td>
						<td><span class="department">部门1</span></td>
					</tr>
					<tr class="role">
						<td>角色1</td>
						<td><span class="department">部门1</span></td>
					</tr>
					<tr class="role">
						<td>角色1</td>
						<td><span class="department">部门1</span></td>
					</tr>
				</table>
			</div>
			<div class="middle">
				<button class="aaa">&lt;授权</button><br/>
				<button class="bbb">撤权&gt;</button>
			</div>
			<div class="right">
				<table border="1" cellspacing="0" cellpadding="2" bordercolor="#ccc" width="100%">
					<tr><th colspan="2">未授角色</th></tr>
					<tr>
						<th>角色</th>
						<th>部门</th>
					</tr>
					<tr class="role">
						<td>角色1</td>
						<td><span class="department">部门1</span></td>
					</tr>
					<tr class="role">
						<td>角色1</td>
						<td><span class="department">部门1</span></td>
					</tr>
					<tr class="role">
						<td>角色1</td>
						<td><span class="department">部门1</span></td>
					</tr>
					<tr class="role">
						<td>角色1</td>
						<td><span class="department">部门1</span></td>
					</tr>
					<tr class="role">
						<td>角色1</td>
						<td><span class="department">部门1</span></td>
					</tr>
					<tr class="role">
						<td>角色1</td>
						<td><span class="department">部门1</span></td>
					</tr>
				</table>
			</div>
		</div>
		<div class="select" style="display:none;">
			<div class="option">拓展部</div>
			<div class="option">研发部</div>
			<div class="option">工程部</div>
			<div class="option">学院部</div>
		</div>
		<script type="text/javascript" src="../lib/jquery-2.1.0.min.js" ></script>
		<script type="text/javascript" src="../lib/comboBox/comboBox.js"></script>
		<script type="text/javascript" src="dialog/dialog.js"></script>
		<script>
			/*g*/
			$(".left,.right").delegate(".role", "click", function(e){
				if($(e.target).is("td"))
				var role = $(this);
				if(role.is(".selected")){
					role.removeClass("selected");
				} else {
					role.addClass("selected");
				}
			});
			
			
			$(".bbb").click(function(){
				$(".right table").append($(".left .role.selected"));
			});
			
			$(".aaa").click(function(){
				$(".left table").append($(".right .role.selected"));
			});
			
			$(".left").comboBox({
				option : ".option",
				target : ".department",
				selected:"selected",
				width:"auto",
				format : function(target, option){
					var value = option.html();
					return value;
				},
				render : function(target, cb){
					cb.html($(".select").clone().html());
					cb.delegate(".option", "click", function(){
						var option = $(this);
					});
				}
			});
			
			var dialog = $().dialog({
				title : "授权",
				content:$(".dialog_body").show()
			});
			
			$("#show").click(function(){
				dialog.show();
			});
	</script>
	</body>
</html>
